<template>
  <div class="tip">
    <!--常见科室的结构-->
    <div class="department">
      <div class="header">
        <div class="left">
          <svg t="1699588612346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4587" width="16" height="16"><path d="M817.3 305.3H762V250c0-61.1-49.5-110.7-110.7-110.7H374.7C313.5 139.3 264 188.8 264 250v55.3h-55.3C147.5 305.3 98 354.8 98 416v359.7c0 61.1 49.5 110.7 110.7 110.7h608.7c61.1 0 110.7-49.5 110.7-110.7V416c-0.1-61.2-49.6-110.7-110.8-110.7z m-498-55.3c0-30.5 24.8-55.3 55.3-55.3h276.7c30.5 0 55.3 24.8 55.3 55.3v55.3H319.3V250z m553.4 525.6c0 30.5-24.8 55.3-55.3 55.3H208.7c-30.5 0-55.3-24.8-55.3-55.3V416c0-30.5 24.8-55.3 55.3-55.3H817.3c30.5 0 55.3 24.8 55.3 55.3v359.6z" p-id="4588" fill="#13227a"></path><path d="M540.7 471.3h-55.4V582H374.7v55.3h110.6V748h55.4V637.3h110.6V582H540.7z" p-id="4589" fill="#13227a"></path></svg>
          <span>常见科室</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg t="1699588698427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5776" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="5777"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>神经内科</li>
          <li>消化内科</li>
          <li>呼吸内科</li>
          <li>内科</li>
          <li>神经外科</li>
          <li>妇科</li>
          <li>产科</li>
          <li>儿科</li>
        </ul>
      </div>
    </div>
    <div class="notice">
      <div class="header">
        <div class="left">
          <svg t="1699597706526" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6846" width="16" height="16"><path d="M846.848 754.688H175.872c-57.856 0-104.96-47.104-104.96-104.96V181.76c0-57.856 47.104-104.96 104.96-104.96h670.976c57.856 0 104.96 47.104 104.96 104.96v468.224c0 57.6-47.104 104.704-104.96 104.704zM175.872 138.24c-24.064 0-43.52 19.456-43.52 43.52v468.224c0 24.064 19.456 43.52 43.52 43.52h670.976c24.064 0 43.52-19.456 43.52-43.52V181.76c0-24.064-19.456-43.52-43.52-43.52H175.872zM817.152 946.432H206.592c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h610.56c16.896 0 30.72 13.824 30.72 30.72s-13.568 30.72-30.72 30.72z" fill="#060001" p-id="6847"></path><path d="M328.448 609.28c-16.896 0-30.72-13.824-30.72-30.72v-173.056c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.824 30.72-30.72 30.72zM508.672 609.28c-16.896 0-30.72-13.824-30.72-30.72v-238.592c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.824 30.72-30.72 30.72zM688.64 609.28c-16.896 0-30.72-13.824-30.72-30.72V269.568c0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72V578.56c0 16.896-13.568 30.72-30.72 30.72z" fill="#060001" p-id="6848"></path></svg>          <span>平台公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg t="1699588698427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5776" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="5777"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>关于延长北京大学国际医院放假的通知</li>
          <li>北京中医药大学东方医院部分科室医生门诊医</li>
          <li>武警总医院号源暂停更新通知</li>
        </ul>
      </div>
    </div>
    <div class="notice">
      <div class="header">
        <div class="left">
          <svg t="1699597995884" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7921" width="16" height="16"><path d="M736 768h-448a32 32 0 0 1 0-64h448a32 32 0 0 1 0 64z m-44.8-415.552l-147.669333-147.669333a61.994667 61.994667 0 0 1-62.848 0l-147.669334 147.669333a32.554667 32.554667 0 0 1-46.037333-46.037333l161.578667-161.578667a63.68 63.68 0 0 1 127.104 0l161.578666 161.578667a32.554667 32.554667 0 0 1-46.037333 46.037333zM565.333333 512a32 32 0 0 1 0 64h-277.333333a32 32 0 0 1 0-64h277.333333z" fill="#EB9E52" p-id="7922"></path><path d="M853.333333 981.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V384a85.333333 85.333333 0 0 1 85.333334-85.333333h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v512a85.333333 85.333333 0 0 1-85.333334 85.333333z m21.333334-576a42.666667 42.666667 0 0 0-42.666667-42.666666H192a42.666667 42.666667 0 0 0-42.666667 42.666666v469.333334a42.666667 42.666667 0 0 0 42.666667 42.666666h640a42.666667 42.666667 0 0 0 42.666667-42.666666V405.333333z" fill="#5C8EF3" p-id="7923"></path></svg>
          <span>停诊公告</span>
        </div>
        <div class="right">
          <span>全部</span>
          <svg t="1699588698427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5776" width="16" height="16"><path d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z" p-id="5777"></path></svg>
        </div>
      </div>
      <div class="content">
        <ul>
          <li>中国人民解放军总医院第六医学中心(原海军总医院)呼吸内科门诊停诊公告</li>
          <li>首都医科大学附属北京潞河医院老年医学科门诊停诊公告</li>
          <li>中日友好医院中西医结合心内科门诊停诊公告部</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.tip {
  color: #7f7f7f;
  .department {
    .content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          width: 40%;
          margin-top: 20px;
        }
      }
    }
  }
  .notice {
    margin-top: 20px;
    .content {
      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-top: 20px;
        }
      }
    }
  }
  .department,
  .notice {
    .header {
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        span {
          margin-left: 5px;
        }
      }
      .right {
        display: flex;
        span {
          margin-right: 5px;
        }
      }
    }
  }
}
</style>
